<template>
    <div class="love" @click='showCollect(postId)'>
        <i class="iconfont icon-shoucang" :style="{color:`${iconColor}`}"></i>
        <p :style="{color:`${iconColor}`}">{{likeNum}}</p>
        <div class="overlay" v-show="show" @click.stop="show = false">
            <div class="content" v-show="show" @click.stop="show = true">
                <p class="title">添加到收藏夹：</p>
                <div class="reason">
                    <template v-if="messageList != 0">
                        <van-radio-group v-model="checked" v-show="show" @click.stop="show = true">
                            <van-cell-group inset>
                                <van-cell v-for="(msg,index) in messageList" :key="index" :title="msg.collectionName" clickable @click="checked = index">
                                    <template #right-icon>
                                        <van-radio :name="index"/>
                                    </template>
                                </van-cell>
                            </van-cell-group> 
                        </van-radio-group>
                    </template>
                    <template v-if="messageList == 0">
                        <van-radio-group v-model="checked" v-show="show" @click.stop="show = true">
                            <van-cell-group inset>
                                <van-cell title="默认收藏夹" clickable @click="checked = 0">
                                    <template #right-icon>
                                        <van-radio :name="0"/>
                                    </template>
                                </van-cell>
                            </van-cell-group> 
                        </van-radio-group>
                    </template>
                </div>
                <div class="loveBottom">
                    <button @click.stop="goodFunc(userId,postContent,postId,className)">确认</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import jwtDecode from 'jwt-decode'
import { Dialog } from 'vant';
import {Toast} from 'vant'
export default {
    name:'Love',
    data() {
        return {
            iconColor:'black', 
            decode:null,
            likeNum:null,
            show:false,
            checked:0,
            messageList:null,
            login:null//判断有没有登录
        }
    },
    props:['love','postId','className','postContent','userId',],
    components:{
        [Dialog.Component.name]: Dialog.Component,
    },
    mounted(){
        if(sessionStorage.length === 0){
            this.login = false    
        }else{
            let token=sessionStorage.getItem("token")
            this.decode = jwtDecode(token);
            this.login = true
        }
        this.likeNum = this.love
    },
    watch:{
        love(newValue,old){
            this.likeNum = newValue
        },
    },
    methods: {
        showCollect(postId){
            if(this.login){
                if(this.iconColor === 'black'){
                   //获取用户的收藏夹
                    axios({
                        url:'/collectionName/queryCollectionName',
                        method:'get',
                        params:{
                            userId:this.decode.userId
                        },
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
                    }).then(data=>{
                        if(data.data.code === 20000){
                            if(data.data.data.length === 0){
                                this.messageList = 0
                            }else{
                                this.messageList = data.data.data
                            }
                            this.show = true
                        }
                    }).catch(err=>{
                        console.log(err)
                    }) 
                }else{
                    //取消收藏
                    axios({
                        url:'/praise/deleteCollection',
                        method:'delete',
                        params:{
                            bodyId:postId,
                            userId:String(this.decode.userId)//这个也是点赞人的id，是个字符串
                        },
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
                    }).then(data=>{
                        if(data.data.code === 20000){
                            this.iconColor = 'black'
                            this.likeNum -= 1
                            console.log('取消收藏')
                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }
            }else{
                Toast('请先登录或注册')
            }
            
        },
        //userId是收到人的id，bodyMessage是帖子的内容
        // goodFunc(userId,postContent,postId,className)
        goodFunc(userId,bodyMessage,postId,className){
            console.log(this.checked)
            let that = this
            async function test(){
                //收藏
                let likeParam = new URLSearchParams()
                if(that.messageList === 0){
                    //只有一个默认收藏夹
                    likeParam.append('bodyId',postId)
                    likeParam.append('userId',that.decode.userId)
                }else{
                    likeParam.append('bodyId',postId)
                    likeParam.append('collectionNameId',that.messageList[that.checked].collectionNameId)
                    likeParam.append('flag',that.messageList[that.checked].flag)
                    likeParam.append('userId',that.decode.userId)
                }
                let data = await axios({
                    method:"post",
                    url:'/praise/addCollection',
                    data:likeParam,
                    headers:{
                       'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                    }
                })
                if(data.data.code === 20000){
                    that.iconColor = getComputedStyle(document.documentElement).getPropertyValue('--themeColor')
                    that.likeNum += 1
                    that.show = false
                    console.log('收藏成功')//成功
                    // //给服务器发送消息
                    let sendParam = new URLSearchParams()
                    sendParam.append('bodyMessage',bodyMessage)
                    sendParam.append('content',`${that.decode.nickname} 收藏了你的帖子`)
                    sendParam.append('classes',String(3))
                    sendParam.append('form',String(that.decode.userId))
                    sendParam.append('to',String(userId))
                    sendParam.append('username',that.decode.nickname)
                    axios({
                        method:'post',
                        url:'/body/sendMessage',
                        data:sendParam,
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
                    }).then(data=>{
                        if(data.data.code === 20000){
                            console.log('成功发送')
                        } 
                    }).catch(err=>{
                        console.log(err)
                    })
                }
                
                
            }
            test()
        }
    },
}
</script>
 
<style lang="less">
    .love{    
        display: inline-flex;
        align-items: center;
        i{
            margin-right: 0.1rem;
            color: #4b4b4b;
        }
    }
    .overlay{
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0,0,0,.3);
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 99;
        .content{
            background-color: white;
            width: 70vw;
            // height: 50vh;
            border-radius: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            p.title{
                font-size: @fontSmall;
                font-weight: bolder;
                text-align: center;
                padding: 0.2rem;

            }
            .reason{
                p{
                    display: block;
                    padding: 0.2rem;
                    text-indent: 1rem;
                    font-size: @fontSmall;
                    color: #303030;
                    border: solid 1px #e9e9e9;
                }
            }
        }
    }
    .loveBottom{
        padding: 0.4rem;
        text-align: center;
        button{
            background-color: white;
            border: solid 1px black;
            border-color: var(--themeColor);
            padding: 0.1rem 0.3rem;
            color: var(--themeColor);
        }
    }
</style>